<template>
  <view class="checkout-container">
    <!-- 支付方式选择 -->
    <PaymentMethodVue :payList="payList"></PaymentMethodVue>

    <!-- 提交订单 -->
    <view class="submit-bar">
      <view class="total-price">
        <text>合计: </text>
        <text class="price">¥{{ totalPrice.toFixed(2) }}</text>
      </view>
      <button type="primary" size="mini" @click="submitOrder">
        提交订单
      </button>
    </view>
  </view>
</template>

<script>
  import {
    useShopStore
  } from '../../store/shopStore.js'
  import PaymentMethodVue from '../../components/order/PaymentMethod.vue'

  export default {
    components: {
      PaymentMethodVue
    },
    data() {
      return {
        orderPrice: 0,
        payList: [{
          title: "微信支付",
          type: "wechat",
          color: "#09BB07"
        }, {
          title: "支付宝",
          type: "alipay",
          color: "#00AAEE"
        }, ]
      }
    },
    computed: {
      totalPrice() {
        return this.orderPrice
      }
    },
    onLoad(options) {
      // 接收从详情页传递的价格参数
      if (options.price) {
        this.orderPrice = parseFloat(options.price)
      }
    },
    methods: {
      submitOrder() {
        const order = {
          totalPrice: this.totalPrice,
          createTime: new Date().toISOString()
        }

        uni.showLoading({
          title: '提交中...'
        })

        // 模拟API请求
        setTimeout(() => {
          uni.hideLoading()
          uni.redirectTo({
            url: `/pages/order/detail?id=${Date.now()}`
          })
        }, 1500)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .checkout-container {
    padding-bottom: 60px;
  }

  .submit-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

    .total-price {
      .price {
        font-size: 18px;
        font-weight: bold;
        color: #f44;
      }
    }
  }
</style>